<template>
  <div>
    <div class="ShowTableContent">
      <button @click="querInfo">查询</button>
      <el-table
        :data="queryClassesStudentInfoList"
        style="width: 100%"
        max-height="650"
      >
        <el-table-column fixed prop="studentId" label="学生id" width="150" />
        <el-table-column prop="studentName" label="学生名字" width="120" />
        <el-table-column prop="studentAccount" label="学生账号" width="120" />
        <el-table-column prop="studentXueHao" label="学生学号" width="120" />
      </el-table>
    </div>

    <div class="PageStyle">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="counts"
        :page-size="pageSize"
        :current-page="pageNow"
        @current-change="pageChange"
        class="PageC"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { studentStateStore } from "../store/StudentInfo.js";
import requests from "../axois/axios.js";
import { ElMessage } from "element-plus";

//定义翻页所需要的数据
let counts = 0;
let pageSize = 10;
let pageNow = 1;
//store数据
let studentStoreInfo = studentStateStore();
//根据这个查询数据

//班级成员数据
let queryClassesStudentInfoList = ref([]);

//定义翻页所需要的的信息
function pageChange(index) {
  //传入的数据是当前的索引
  pageNow = index;
  //调用查询共嗯
  querInfo();
}
//定义查询功能
async function querInfo() {
  console.log("班级成员:" + studentStoreInfo.getterStudentId);
  let { data } = await requests.post("/student/qcslibs", {
    page: pageNow,
    pageSize: pageSize,
    //班级id
    studentId: studentStoreInfo.getterStudentId,
  });
  if (data.code == 200) {
    ElMessage({
      message: "查询成功",
      type: "success",
    });
    queryClassesStudentInfoList.value = data.data;
    //数据绑定到模板上
    console.log("查询到的数据为" + data.data);
    //翻页数据设置
    counts=data.countTotal
    pageSize=data.pageSize
    pageNow=data.page
    
  } else {
    ElMessage({
      message: "查询失败",
      type: "error",
    });
  }
}
</script>

<style>
.ShowTableContent {
  width: 100%;
  height: 646px;
}
.PageStyle {
  display: flex;
  align-items: center;
}
</style>